<template>
	<view>
		<view class="w-1 sticky bg-ff" style="padding: 20rpx 30rpx;">
			<view class="flex-1 relative sbox fr-s-c">
				<up-search @custom="getsearch" @search="getsearch" searchIconColor="#333333"
					:inputStyle="{fontSize:'28rpx'}" height="68rpx" placeholder="搜索"
					:actionStyle="actionStylesss" clearabled shape="round" bgColor="#f6f6f6"
					v-model="keyword"></up-search>
			</view>
		</view>
		
		<view class="w-1 fl-s-c">
			<view class="ibox fr-s-c p-20 m-b-20"  @click="toDetails(item)" v-for="(item,index) in list" :key="index">
				<image :src="$dimg(item.image)" class="br-20" style="width: 152rpx; height: 152rpx;" mode="aspectFill"></image>
				<view class="flex-1 h-1 m-l-20 fl-a-s">
					<text class="c-00 fs-32 bold">{{item.title}}</text>
					<view class="fr-b-c w-1">
						<view class="c-price bold">
							<text class="fs-28">￥</text>
							<text class="fs-36">{{item.price}}</text>
							<text class="fs-24">起</text>
						</view>
						<view class="fr-c subbtn fr-c c-ff fs-22">立即下单</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="w-1 p-t-150" v-if="nodata">
			<up-empty :icon="$icon"></up-empty>
		</view>
	</view>
</template>



<script setup>
	function toDetails(items) {
		uni.navigateTo({
			url: "/pages/index/Detail?id=" + items.id
		})
	}
	const page = ref(1);
	const list = ref([]);
	const nodata = ref(false);
	const loadmore = ref(true);
	const keyword = ref('')
	const seche = ref(1); // 1综合 2按照销量 3=价格
	onLoad((o) => {
		keyword.value = o.keyword;
		getlist()
	})
	onPullDownRefresh(() => {
		reget()
	})
	onReachBottom(() => {
		if (loadmore.value) {
			page.value++;
			getlist()
		}
	})

	function reget() {
		page.value = 1;
		getlist()
	}

	function getsearch() {
		page.value = 1;
		getlist()
	}


	function getlist(loading = true) {
		uni.$post({
			url: '/api/goods/swgoodslst',
			data: {
				page: page.value,
				keyword:keyword.value
			},
			loading
		}).then(res => {
			if (page.value == 1) list.value = [];
			list.value = [...list.value, ...res.data];
			nodata.value = !list.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			list.value = [];
			nodata.value = !list.value.length;
			loadmore.value = true;
		})
	}

	function getparams(val) {
		console.log(val)
		params.value = val;
		reget()
	}

	const sortarr = [{
		name: '综合',
		val: 1
	}, {
		name: '销量',
		val: 2
	}, {
		name: '价格',
		val: 3
	}, {
		name: '新品',
		val: 4
	}]
	const curs = ref(0)
	const psort = ref(0) // 0 1 2 

	function changeSort(index) {
		curs.value = index;
		if (index == 2) {
			if (psort.value == 0 || psort.value == 2) {
				psort.value = 1
			} else if (psort.value == 1) {
				psort.value = 2
			}
		} else {
			psort.value = 0
		}
		reget()
	}

	function todetail(item) {
		if (!uni.getStorageSync('user').token) return getApp().tologin();
		uni.navigateTo({
			url: '/pages/index/Detail?id=' + item.id
		})
	}
</script>

<style>
	page {
		background: #ffffff;
	}

	.h-item {
		width: 332rpx;
		height: 540rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		overflow: hidden;
	}

	.tinfo {
		width: 332rpx;
		height: 112rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #747474 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 8rpx 20rpx;
	}

	.h-lable {
		min-width: 76rpx;
		padding: 0 8rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #DDDDDD;
		margin-right: 8rpx;
	}

	.sbox {
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		/* padding: 0 20rpx 0 24rpx; */
	}

	.sortbox {
		width: 690rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	
	.ibox{
		width: 686rpx;
		height: 192rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #E9E9E9;
	}
	
	.subbtn{
		width: 144rpx;
		height: 52rpx;
		background: #01796D;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}
</style>